<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>商家推荐</title>
<link rel="stylesheet" href="__HOME__/css/public_style.css">
<style>
	html,body{height:100%;}
	body{background-color:#f1f1f1;}
	.sige_an>ul>li{float:left;line-height:40px;width:50px;margin:0 calc(12.5% - 25px);text-align:center;font-size:16px;color:#b8b8b8;}
	.sige_an_guo{border-bottom:2px solid #5a6ff3;padding-top:2px;line-height:36px!important;color:#666!important;}
	
	/*-- 通知 - 美食 - 好玩 - 其他 --*/
	.sige_cont_style{padding:0 20px 68px;margin-top:16px;height:calc(100% - 124px);overflow:auto;}
	.sige_cont_style>ul>li{margin-bottom:30px;height:110px;border-radius:5px;overflow:hidden;}
	.sige_cont_style>ul>li>div:nth-of-type(1){float:left;width:110px;position:relative;}
	.sige_cont_style>ul>li>div:nth-of-type(1)>img{width:100%;}
	.sige_cont_style>ul>li>div:nth-of-type(1)>div{
		position:absolute;width:34px;height:34px;right:-17px;top:calc(50% - 17px);
		background-image: -moz-linear-gradient( 4deg, rgb(254,196,11) 0%, rgb(254,127,10) 100%);
		background-image: -webkit-linear-gradient( 4deg, rgb(254,196,11) 0%, rgb(254,127,10) 100%);
		background-image: -ms-linear-gradient( 4deg, rgb(254,196,11) 0%, rgb(254,127,10) 100%);
		box-shadow: 0px 0 10px 0px rgba(0, 0, 0, 0.4);
		border-radius:50%;
	}
	.sige_cont_style>ul>li>div:nth-of-type(1)>div>div{width:34px;height:34px;background:url(__HOME__/img/tubiao_02.png) no-repeat;background-size:100px 100px;background-position:-40px -32px;}
	
	.sige_cont_style>ul>li>div:nth-of-type(2){float:left;width:calc(100% - 144px);height:90px;background-color:#fff;padding:10px 10px 10px 24px;}
	.sige_cont_style>ul>li>div:nth-of-type(2)>p:nth-of-type(1){line-height:30px;font-weight:bold;}
	.sige_cont_style>ul>li>div:nth-of-type(2)>p:nth-of-type(2){font-size:12px;line-height:30px;color:#aaa;}
	.sige_cont_style>ul>li>div:nth-of-type(2)>div{font-size:12px;line-height:30px;}
	.sige_cont_style>ul>li>div:nth-of-type(2)>div>p:nth-of-type(1){float:left;width:calc(100% - 80px)}
	.sige_cont_style>ul>li>div:nth-of-type(2)>div>p:nth-of-type(2){color:#fe9e0a;float:left;width:80px;font-size:18px;text-align:right;}
	
		/*-- 全部 --*/
	.tongzhi_cont{}
		/*-- 全部 --*/
		/*-- 美食 --*/
	/*.meishi_cont{display:none;}*/
		/*-- 美食 --*/
		/*-- 好玩 --*/
	/*.haowan_cont{display:none;}*/
		/*-- 好玩 --*/
		/*-- 其他 --*/
	/*.qita_cont{display:none;}*/
		/*-- 其他 --*/
	/*-- 全部 - 美食 - 好玩 - 其他 --*/

</style>
</head>

<body>
	<!-- 四个按钮 -->
	<div class="sige_an">
		<ul>
			<li class="sige_an_guo">全部</li>
			{foreach $cate as $k => $v}
			{php}
				if($v=='活动' || $v=='领券')continue;
			{/php}
			<li>{$v}</li>
			{/foreach}
			<h6 class="clearfix"></h6>
		</ul>
	</div>
	<!-- 四个按钮 -->
	<!-- 全部 -->
	<div class="tongzhi_cont sige_cont_style" id="shoplist">
		<ul>
		{volist name="shop" id="v"}
			<li onclick="location.href='/index/index/shopinfo?id={$v['supplier_id']}.html'" data-cate="{$cate[$v['cat_id']]}">
				<div>
					<img src="__HOME__/img/shangjia_kth.jpg" alt="">
					<div><div></div></div>
				</div>
				<div>
					<p>{$v['name']}</p>
					<p>营业时间：{$v['business_time_u']}</p>
					<div>
						<p>{$v['address']}</p>
						<p>
						{notempty name="v['discount']"}
                       		{$v['discount']}折
                        {/notempty}
						</p>
						<h6 class="clearfix"></h6>
					</div>
				</div>
				<h6 class="clearfix"></h6>
			</li>
		{/volist}
			
		</ul>
	</div>
	<!-- 全部 -->


	<!-- 底部按钮区 -->
	<div class="footer">

		<div onClick="location.href='{:url('index')}'">
			<div><div style="background-position-X:-24px"></div></div>
			<p>首页</p>
		</div>
		<div>
			<div><div style="background-position-Y:-24px"></div></div>
			<p>商家</p>
		</div>
		<div id="saoyisao" onclick="location.href='/index/index/scan.html'">
			<div><div></div></div>
			<p>扫一扫</p>
		</div>
		<div onClick="location.href='{:url('seller')}'">
			<div><div style="background-position-X:-48px"></div></div>
			<p>商家入驻</p>
		</div>
		<div onClick="location.href='{:url('personal')}'">
			<div><div style="background-position-X:-72px"></div></div>
			<p>我的</p>
		</div>
		<h6 class="clearfix"></h6>
	</div>
	<!-- 底部按钮区 -->
</body>
<script src="__HOME__/js/jquery-3.3.1.js"></script>
<script>
	//$(".sige_an>ul>li").click(function(){
	// 	var a = $(this).index();
	// 	$(".sige_an_guo").removeClass("sige_an_guo");
	// 	$(this).addClass("sige_an_guo");
	// 	$(".sige_cont_style").slideUp();
	// 	if(a === 0){
	// 		$(".tongzhi_cont").slideDown();
	// 	}else if(a === 1){
	// 		$(".meishi_cont").slideDown();
	// 	}else if(a === 2){
	// 		$(".haowan_cont").slideDown();
	// 	}else if(a === 3){
	// 		$(".qita_cont").slideDown();
	// 	}
	// })

	$('.sige_an li').click(function(){

		 selecate(this.innerHTML);
	});

	function selecate(_str){

		if(_str == '全部'){
			$('#shoplist ul li').show();
			return false;
		}else{
			$('#shoplist ul li').hide();
		}
		$('#shoplist ul li').each(function(){

			if(this.getAttribute('data-cate') == _str){

				$(this).show();
			}
		});
	}

</script>
</html>
